<!--
 * @Author: t-xiangqun.li t-xiangqun.li@pcitc.com
 * @Date: 2025-10-16 11:19:35
 * @LastEditors: lixiangqun
 * @LastEditTime: 2025-10-30 07:06:04
 * @FilePath: /electrconVue/src/components/ConversationList.vue
 * @Description: 对话列表
-->
<template>
  <div class="conversation-list">
    <div
      class="item border-t border-gray-300 cursor-pointer p-2"
      :class="{
        'bg-white hover:bg-gray-200': conversationStore.selectedId !== item.id,
        'bg-gray-100 hover:bg-gray-300':
          conversationStore.selectedId === item.id,
      }"
      v-for="item in items"
      :key="item.id"
      @click="goConversation(item)"
    >
      <div
        class="flex justify-between items-center text-sm text-gray-500 leading-5"
      >
        <span>{{ item.selectedModel }}</span>
        <span>{{ item.createdAt }}</span>
      </div>
      <div class="text-gray-900 leading-6 font-semibold truncate">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ConversationProps } from "src/types";
import { useConversationStore } from "../stores/conversation";
import { computed } from "vue";
defineProps<{ items: ConversationProps[] }>();
const conversationStore = useConversationStore();
const router = useRouter();
const goConversation = (item: ConversationProps) => {
  conversationStore.selectedId = item.id;
  router.push({
    path: "/conversation",
    query: { id: item.id },
  });
};
</script>
